<template>
  <p>child</p>
  <p>{{ num }}</p>
  <button @click="$emit('setNum')">按钮</button>
  <button @click="handleClick">按钮</button>
</template>

<script lang="ts">
// 所有组件都可以写多个script标签和style标签
// 注意：多个script标签语法环境必须一致
// 选项式API
export default {
  name: "Child", // 取名称，为了开发调试方便
};
</script>

<script lang="ts" setup>
// 组合式API
// 声明接受props
// 不需要引入，可以直接使用
// 通过泛型参数来定义props的类型
const props = defineProps<{
  num: number;
}>();

console.log(props.num);

// 声明接受自定义事件
// 不需要引入，可以直接使用
const emit = defineEmits(["setNum"]);

const handleClick = () => {
  // 在js中触发自定义事件
  emit("setNum");
};
</script>

<style></style>
